<template>
    <div class="page animate__animated animate__fadeIn">
        <!-- <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: '20px 20px 0' }">
            <el-form size="small" inline label-position="right" ref="searchForm">
                <el-form-item label="状态">
                    <el-select v-model="searchForm.status" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分类名称">
                    <el-input placeholder="请输入分类名称搜索"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="reload">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card> -->
        <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: '20px 20px 20px' }">
            <el-table v-loading="isLoading" :data="cateGoryList" row-key="category_id" size="small"
                header-cell-class-name="table_header_cell">
                <el-table-column prop="category_id" label="分类ID" type="">
                </el-table-column>
                <el-table-column prop="name" label="分类名称">
                </el-table-column>
                <el-table-column prop="image" label="分类图片">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.image" fit="contain" class="list-img">
                            <div slot="error" class="image-slot">
                                <p>暂无图片</p>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                        <el-tag type="info" v-if="scope.row.status == 2" size="mini">禁用</el-tag>
                        <el-tag type="success" v-else size="mini">启用</el-tag>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="操作" fixed="right" width="160px">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editCate(scope.row)">编辑</el-button>
                        <el-button type="text" @click="delRole(scope.row.role_id)">删除</el-button>
                    </template>
                </el-table-column> -->
                <div slot="empty" class="empty">
                    <el-empty description="暂无数据" />
                </div>
            </el-table>
            <!-- <pagination v-if="total" :total="total" :page.sync="searchForm.page" :limit.sync="searchForm.limits" @pagination="getCateGoryList" /> -->
        </el-card>
        <add-cate ref="addCate" @reload="reload"></add-cate>
        <edit-cate ref="editCate" @reload="reload"></edit-cate>
    </div>
</template>

<script>
import { cateGoryList, cateGoryAllList } from "../../api/goods";
import addCate from "./components/addCate.vue";
import editCate from "./components/editCate.vue";
export default {
    components: {
        addCate,
        editCate,
    },
    data() {
        return {
            isLoading: false,
            options: [
                {
                    value: "-1",
                    label: "全部",
                },
                {
                    value: "1",
                    label: "启用",
                },
                {
                    value: "0",
                    label: "禁用",
                },
            ],
            searchForm: {
                status: "-1",
                page: 1,
                limits: 20,
                company_id: '',
            },
            cateGoryList: [],
            selectRow: {},
            isShow: false,
            total: 0,
        };
    },
    created() {
        this.isLoading = true;
        this.searchForm.company_id = localStorage.getItem('COMPANYID') ? localStorage.getItem('COMPANYID') : '';
        this.getCateGoryList();
    },
    methods: {
        addCate() {
            this.$refs.addCate.add();
            this.getCompanyData();
        },
        editCate(row) {
            this.$refs.editCate.add();
            this.$nextTick(() => {
                this.$refs.editCate.ruleForm.category_id = row.category_id;
                this.$refs.editCate.ruleForm.name = row.name;
                this.$refs.editCate.ruleForm.parent_id = row.parent_id;
                this.$refs.editCate.ruleForm.image = row.image;
                this.$refs.editCate.ruleForm.sort = row.sort;
                this.$refs.editCate.ruleForm.company_id = row.company_id;
                this.$refs.editCate.ruleForm.status = row.status;
                this.$refs.editCate.ruleForm.ad_pic = row.ad_pic;
                this.$refs.editCate.getCateTwoList();
                console.log('this.$refs.editCate.ruleForm', this.$refs.editCate.ruleForm)
            });
        },
        //获取分类列表
        getCateGoryList() {
            cateGoryAllList(this.searchForm).then((res) => {
                this.isLoading = false;
                if (res.code == 0) {
                    this.cateGoryList = res.data;
                }
            });
        },
        reload() {
            console.log('this', this.searchForm)
            this.isLoading = true;
            this.searchForm.page = 1;
            this.searchForm.company_id = 1;
            this.cateGoryList = []
            this.getCateGoryList()
        },
        //获取公司信息
        getCompanyData() {
            getCompanyData().then((res) => {
                if (res.code == 0) {
                    this.compony = res.data;
                    this.$refs.addCate.compony = res.data;
                    this.$refs.editCate.compony = res.data;
                }
            });
        },
    },
};
</script>

<style scoped>
/deep/ .el-table__expand-icon .el-icon-arrow-right:before {
    content: "\e791";
    font-size: 14px;
}

/deep/ .el-table__expand-icon--expanded .el-icon-arrow-right:before {
    content: "\e791";
    font-size: 14px;
}
</style>